<template>
    <div>
    <div class="recommend-title">热销推荐</div>
    
    <ul>

        <router-link tag="li" 
         class="item border-bottom" 
         v-for="item of list" 
         :key="item.id"
         :to="'/detail/' + item.id"
         >
                <img class="item-img" :src="item.imgUrl">

              <div class="item-info">
              <p class="item-title">{{item.title}}</p>
              <p class="item-desc">{{item.desc}}</p>
              <p class="item-price">￥{{item.price}}<span class="qi">起</span><span class="item-price-right">{{item.right}}</span></p>
              <button class="item-button">查看详情</button>
             </div>

        </router-link>

        <router-link  to="/detail">
        <div class="item-more">
                更多详情<span class="iconfont">&#xe614;</span>
       </div>
  </router-link>
    </ul>

</div>
</template>
<script>
    export default {
       name: 'HomeRecommend',
       props: {
        list: Array
       }
    }
</script>
<style lang="stylus" scoped>
    @import  '~styles/mixins.styl'
     .recommend-title {
        margin-top: .2rem;
        line-height: .8rem;
        background: #eee;
        text-indent: .2rem;
        font-weight: 700;
        font-size: .3rem;
     }
    
    .item {
        display: flex;
        height: 2.2rem;
        overflow: hidden;
        margin-bottom: .2rem
    }

    .item-img {
       height: 2rem;
       width: 2rem;
       padding: .1rem;
    }

    .item-info {
        margin-left: .5rem;
        flex: 1;
        padding: .1rem;
        min-width: 0;
        border-bottom: 1px solid #ccc;
    }

    
    .item-title {
        line-height: .54rem;
        font-size: .32rem;
        ellipsis();
    }

    .item-desc {
        line-height: .4rem;
        color: #ccc;
        ellipsis();
    }
 
   .item-price {
    line-height: .60rem;
    color: red;
    font-size: .38rem;

   }

   .item-price .qi {
    color: #cc1;
    font-size: .28rem;
    margin-left: .1rem;
   }
    
 .item-price-right {
    float: right;
    font-size: .22rem;
    margin: .6rem .2rem 0 0; 
    ellipsis();
    color: #8B8B83;

 }

   .item-button {
    background: #ff9300;
    padding: 0 .2rem;
    border-radius: .06rem;
    color: #fff;
   }
 
   .item-more {
      height: .8rem;
      line-height: .8rem;
      font-weight: 700;
      text-align: center;
      font-size: .3.5rem;
      color: #6959CD;
   }

   

</style>